﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="microsoft-signalr/signalr.js"></script>
</head>
<body>
    <div id="reviceMsg" style="height:400px;border:1px solid #0094ff;overflow:auto;"></div>
    <div style="margin-top:10px;">
        <input type="text" id="sendUser" style="width:100px; height:25px; box-sizing:content-box;" />
        <input type="text" id="sendTxt" style="width: calc(100% - 245px); height: 25px; line-height: 25px; box-sizing: content-box;" />
        <input type="button" id="sendBtn" value="发送" style="width:100px; height:25px; box-sizing:content-box;" />
    </div>
    <script>
        var connection = new signalR.HubConnectionBuilder().withUrl("/ChatHub").build();
        document.getElementById("sendBtn").disabled = true;

        connection.on("ReceiveMessage", function (user, message) {
            var reviceMsg = document.getElementById('reviceMsg');
            reviceMsg.innerHTML += `<span style="color:red;">${user}</span></span>： ${message}<br/>`;
        });

        connection.start().then(function () {
            document.getElementById("sendBtn").disabled = false;
        }).catch(function (err) {
            return console.error(err.toString());
        });

        document.getElementById("sendBtn").addEventListener("click", function (event) {
            var user = document.getElementById("sendUser").value;
            var message = document.getElementById("sendTxt").value;
            connection.invoke("SendMessage", user, message).catch(function (err) {
                return console.error(err.toString());
            });
            event.preventDefault();
        });
    </script>
</body>
</html>